<template>
  <div class="ctm-node">
    <div class="ctm-node__header">标题栏</div>
    <div class="ctm-node__body">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="ctm-node__body__item"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ctmNode',
  data() {
    return {
      list: [
        { label: '你好1' },
        { label: '你好22' },
        { label: '你好333' },
        { label: '你好4444' },
      ],
    }
  },
  methods: {
    handleClick(item) {
      console.log(item.label)
    },
  },
}
</script>

<style scoped>
.ctm-node {
  border-radius: 20px;
  .ctm-node__header {
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(180deg, #3767d0 0%, #68a0ea 100%);
  }
  .ctm-node__body {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 0 0 8px 8px;

    background-color: #fafafa;
    .ctm-node__body__item {
      flex-shrink: 0;
      width: 124px;
      line-height: 29px;
      border-radius: 5px;
      margin: 0 16px 8px 0;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background-image: linear-gradient(180deg, #e0d726 0%, #4e9803 100%);
      cursor: pointer;
    }
  }
}
</style>
